<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#bg").click(function(){
                $("#nr").slideToggle("slow");
            });
        });
    </script>

    <script>
        $(document).ready(function(){
            $("#bg1").click(function(){
                $("#nr1").slideToggle("slow");
            });
        });
    </script>

    <script>
        $(document).ready(function(){
            $("#bg2").click(function(){
                $("#nr2").slideToggle("slow");
            });
        });
    </script>
    <style type="text/css">
        #bg{
            border-radius: 20px;
            border: solid 2px #e3e984;
            width: 218px;
            height: 218px;
            text-align: center;
            /*margin:0 auto;*/
            padding-top: 30px;
            float: left;
        }
        #nr{
            border-radius: 20px;
            border: solid 2px #e3e984;
            /*text-align: center;*/
            /*margin:0 auto;*/
            padding-top: 20px;
            display:none;
            float: left;
            background-color: rgba(249, 255, 146, 0.64);
        }
        #bg1,#bg2{
            border-radius: 20px;
            border: solid 2px #e3e984;
            width: 218px;
            height: 218px;
            text-align: center;
            padding-top: 30px;
            /*float: left;*/
            margin: 80px 0 0 160px;
        }
        #nr1,#nr2{
            border-radius: 20px;
            border: solid 2px #e3e984;
            padding-top: 20px;
            display:none;
            /*float: left;*/
            background-color: rgba(249, 255, 146, 0.64);
            margin: 80px 0 0 2px;
            color: #1d6169; width: 287px;height: 170px;
        }
    </style>

</head>
<body background="08.jpg">

<div id="bg" style="font-size:44px;margin: 80px 0 0 160px;">
    <img src="./mp/06.png" style="border-radius: 20px; width: 218px;height: 218px" alt=""/>
    <!--<strong>学习</strong>-->
</div>
<div id="nr" style="margin: 80px 0 0 2px;color: #1d6169; width: 287px;height: 270px;">
    <ul>
        <li><a href="http://www.runoob.com/">菜鸟教程</a></li>
        <li><a href="http://www.cnblogs.com/jikey/p/3613082.html">web前端开发分享</a></li>
        <li><a href="http://www.jquery123.com/">jQuery API 中文文档</a></li>
        <li><a href="http://www.bootcss.com/p/bootstrap-switch/">Bootstrap 开关（switch）控件 </a></li>
        <li><a href="http://www.bootcss.com/p/headroom.js/playroom/"> Headroom.js </a></li>
        <li><a href="https://www.codecademy.com/zh/">练习网站</a></li>
        <li><a href="http://jquery.com/download/">Downloading jQuery</a></li>
        <li><a href="http://v3.bootcss.com/javascript/#collapse">JavaScript 插件</a></li>
        <li><a href="http://v3.bootcss.com/css/#grid">全局 CSS 样式</a></li>
    </ul>
</div>

<div id="bg1">
    <img src="./mp/08.png" style="border-radius: 20px; width: 218px;height: 218px" alt=""/>
    <!--<strong>交流</strong>-->
</div>
    <div id="nr1">
        <ul>
            <li><a href="http://git.oschina.net/xinyiyi">代码托管</a></li>
            <li><a href="https://tower.im/users/sign_up">tower</a></li>
            <li><a href="http://md.tansuyun.cn/#!/">碳素云-markdown编辑器</a></li>
        </ul>
    </div>



    <div id="bg2" style="font-size:44px;margin: 80px 0 0 160px;">
        <img src="./mp/07.png" style="border-radius: 20px; width: 218px;height: 218px" alt=""/>
        <!--<strong>酷炫</strong>-->
    </div>
    <div id="nr2" style="margin: 80px 0 0 2px;color: #1d6169; width: 287px;height: 170px;">
        <ul>
            <li><a href="http://v2.bootcss.com/index.html">Bootstrap</a></li>
            <li><a href="http://www.uisdc.com/progress-bar-designs">创意进度条</a></li>
            <li><a href="http://www.jq22.com/">jOuery插件</a></li>
            <li><a href="http://www.17sucai.com/pins/tag/2210.html">jOuery特效代码</a></li>
            <li><a href="http://www.yestone.com/">图片</a></li>
            <li><a href="http://www.uisdc.com/99-beautiful-free-signin-login-and-signup#">注册登录设计</a></li>
        </ul>
    </div>



</body>
</html>